<template>
  <div :class="['b-user-actions flex justify-between items-center',actionCls]">
    <div class="b-user-actions__left">
      <ZSPlitButton title="Disable"
                    plain
                    size="small"
                    :disabled="!$hasPermission('sys:user:disabled')"
                    :disabled-0="!$hasPermission('sys:user:disablednonCwUser')|| !disablednonCwUserbtn"
                    :disabled-1="!$hasPermission('sys:user:disablednonAutotaskUser')|| !disablednonAutoTaskbtn"
                    :options="disableOptions"
                    @click="handleBatchDisabled"
                    @command="commandDisabled" />
      <el-button size="small"
                 plain
                 @click="handleSetPermission"
                 :disabled="!$hasPermission('sys:user:setrole')"
                 style="margin:0 6px">Set Role</el-button>
      <el-button size="small"
                 plain
                 @click="handleBatchEnable"
                 :disabled="!$hasPermission('sys:user:enabled')"
                 style="margin:0 6px">Enable</el-button>
      <el-button size="small"
                 type="danger"
                 class="b-user-actions-delete"
                 style="margin:0 6px"
                 :disabled="!$hasPermission('sys:user:batchDelete')"
                 @click="handleBatchDelete"
                 plain>Delete</el-button>
      <el-tooltip class="item" effect="dark" content="Dashboard only users will be free and only can view dashboards" placement="top">
        <el-button size="small" type="text">Free User: {{dashboardUserCount}}</el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="This is how many users that you will be billed, disabled users to reduce the number of billable user" placement="top">
        <el-button size="small" type="text">Billable Users: {{billableUserCount}}</el-button>
      </el-tooltip>
    </div>
    <div class="b-user-actions__right">
      <ZSplitSelect label="Account Status"
                    style="margin:0 6px"
                    :options="statusOptions"
                    @change="handleSearch"
                    v-model="status" />
      <ZSPlitButton title="New User"
                    plain
                    size="small"
                    type="primary"
                    :disabled="!$hasPermission('sys:user:add')"
                    :disabled-0="!$hasPermission('sys:user:syncteamsuser')"
                    :disabled-1="!$hasPermission('sys:user:automapalluser')"
                    @click="handleAddUser"
                    @command="commandUser"
                    :options="userOptions" />
    </div>

  </div>
</template>

<script>
import ZSPlitButton from '@/components/storybook/z-split-button/index'
import ZSplitSelect from '@/components/storybook/z-split-select/index'
import { DISABLE_OPTIONS, USER_OPTIONS, STATUS_OPTIONS } from './index.schema'

export default {
  name: 'BUserActions',
  components: {
    ZSPlitButton,
    ZSplitSelect
  },
  props: {
    users: Array,
    disablednonCwUserbtn: Boolean,
    disablednonAutoTaskbtn: Boolean,
    actionCls: String,
    dashboardUserCount: Number,
    billableUserCount: Number
  },
  data () {
    return {
      disableOptions: Object.freeze(DISABLE_OPTIONS),
      userOptions: Object.freeze(USER_OPTIONS),
      statusOptions: Object.freeze(STATUS_OPTIONS),
      status: 1
    }
  },
  methods: {
    commandDisabled (command) {
      if (command === 0) {
        this.handleBatchDisabledCW()
      }
      if (command === 1) {
        this.handleBatchDisabledAutoTask()
      }
    },
    commandUser (command) {
      if (command === 0) {
        this.handleSyncTeamsUser()
      }
      if (command === 1) {
        this.handleAutoMapUsers()
      }
    },
    handleBatchDisabled () {
      if(!this.$hasPermission('sys:user:disabled')) return
      this.$emit('batchDisabled')
    },
    handleBatchDisabledCW () {
      this.$emit('batchDisabledCW')
    },
    handleBatchDisabledAutoTask () {
      this.$emit('batchDisabledAutoTask')
    },
    handleBatchEnable () {
      this.$emit('batchEnable')
    },
    handleBatchDelete () {
      this.$emit('batchDelete')
    },
    handleSearch () {
      this.$emit('search', this.status)
    },
    handleAutoMapUsers () {
      this.$emit('autoMapUsers')
    },
    handleSyncTeamsUser () {
      this.$emit('syncTeamsUser')
    },
    handleAddUser () {
      this.$emit('addUser')
    },
    handleSetPermission () {
      this.$emit('setPermission')
    }

  }
}
</script>

<style lang="scss" scoped>
.b-user-actions {
  &-delete {
    background: #fff;
  }
}
</style>
